import { FC } from 'react';
import { Avatar, Typography, Tag, Card, Space, Spin } from 'antd';
import { UserOutlined, RobotOutlined, LinkOutlined } from '@ant-design/icons';
import type { ChatMessage as AIChatMessage } from 'types/chat';
import dayjs from 'dayjs';
import ReactMarkdown from 'react-markdown';
import TechGraph from 'components/TechGraph';
import styles from './index.module.css';

const { Text, Link } = Typography;

interface ChatMessageProps {
  message: AIChatMessage;
}

const ChatMessage: FC<ChatMessageProps> = ({ message }) => {
  const isUser = message.role === 'user';
  const nodes = message.references?.graphData?.nodes || [];
  const relationships = message.references?.graphData?.relationships || [];

  const categories = Array.from(new Set(nodes.map((node) => node.category)));

  return (
    <div
      className={`${styles.messageWrapper} ${
        isUser ? styles.userMessage : styles.aiMessage
      }`}
    >
      {!isUser && (
        <>
          <Avatar
            className={styles.avatar}
            icon={<RobotOutlined />}
            style={{ backgroundColor: '#1890ff' }}
          />

          <div className={styles.messageContent}>
            {/* 加载状态 */}
            {message.loading ? (
              <div className={styles.loadingWrapper}>
                <Spin size="small" />
                <span className={styles.loadingText}>AI正在思考...</span>
              </div>
            ) : (
              <div className={styles.messageText}>
                <ReactMarkdown>{message.content}</ReactMarkdown>
              </div>
            )}

            <div className={styles.messageTime}>
              {dayjs(+message.timestamp * 1000).format('YYYY-MM-DD HH:mm:ss')}
            </div>

            {/* 只在AI回复完成后显示相关信息 */}
            {!message.loading && message.references && (
              <div className={styles.relatedInfo}>
                {/* 相关链接 */}
                {message.references.links &&
                  message.references.links.length > 0 && (
                    <Card
                      size="small"
                      title="相关链接"
                      className={styles.relatedCard}
                    >
                      <Space direction="vertical">
                        {message.references.links.map((link, index) => (
                          <Link key={index} href={link.source}>
                            <LinkOutlined /> {link.title}
                          </Link>
                        ))}
                      </Space>
                    </Card>
                  )}

                {/* 话题标签 */}
                {message.references.tags && (
                  <div className={styles.tags}>
                    <Text type="secondary">相关话题：</Text>
                    <Space size={[0, 8]} wrap>
                      {message.references.tags.map((tag, index) => (
                        <Tag key={index} color="blue">
                          {tag}
                        </Tag>
                      ))}
                    </Space>
                  </div>
                )}

                {/* 相关图谱 */}
                {message.references.graphData && (
                  <Card
                    size="small"
                    title="相关图谱"
                    className={styles.graphCard}
                    bodyStyle={{ height: 400 }}
                  >
                    <TechGraph
                      size="small"
                      title="产业关系图谱"
                      categories={categories}
                      nodes={nodes}
                      relationships={relationships}
                    />
                  </Card>
                )}
              </div>
            )}
          </div>
        </>
      )}

      {isUser && (
        <>
          <div className={styles.messageContent}>
            <div className={styles.messageText}>{message.content}</div>
            <div className={styles.messageTime}>
              {dayjs(+message.timestamp * 1000).format('YYYY-MM-DD HH:mm:ss')}
            </div>
          </div>
          <Avatar
            className={styles.avatar}
            icon={<UserOutlined />}
            style={{ backgroundColor: '#87d068' }}
          />
        </>
      )}
    </div>
  );
};

export default ChatMessage;
